@import '../common/theme/index';
@import './variables';

$header-height: 32px;
$menu-height: 24px;
.value-panel {
  position: absolute;
  top: 1px;
  left: $server-panel-width + $key-panel-width;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: $header-height;
    border-bottom: 1px solid $global-border-color-base;

    .el-button {
      padding: 0 15px;
      height: $header-height;
      line-height: $header-height;
      border-radius: 0;
    }

    .el-select {
      float: right;

      .el-input {
        .el-input__inner {
          width: 80px;
          height: $header-height;
          line-height: $header-height;
          border-radius: 0;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }

        .el-select__caret {
          line-height: $header-height;
        }
      }
    }
  }

  .content {
    position: absolute;
    top: $header-height;
    left: 0;
    right: 0;
    bottom: 0;

    textarea {
      font-family: Menlo, Consolas, "Courier New", Courier, 'Source Sans Pro', Arial, sans-serif;
      font-size: 14px;
    }

    $title-header-height: 20px;

    .title-header {
      position: absolute;
      top: 0;
      left: 0;
      width: $data-key-width;
      background-color: $global-bg-color-secondary;
      border-right: 1px solid $global-border-color-base;
      height: $title-header-height;
      line-height: $title-header-height;
      font-size: 11px;
      color: $global-font-color-primary;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;

      .col-index {
        border-right: 1px solid $global-border-color-base;
        text-align: center;
      }

      .col-ele {
        border-right: 1px solid $global-border-color-secondary;
        padding-left: 15px;
      }

    }

    .data-key {
      position: absolute;
      top: 0;
      left: 0;
      bottom: $menu-height;
      width: $data-key-width;
      border-right: 1px solid $global-border-color-base;
      overflow-x: hidden;
      overflow-y: auto;

      &.with-title-header {
        top: $title-header-height;
      }

      $item-height: 30px;

      .item {
        height: $item-height;
        line-height: $item-height;
        padding: 0 15px;
        font-size: 13px;
        color: $global-font-color-secondary;
        border-bottom: 1px solid $global-border-color-secondary;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        display: flex;

        $save-button-width: 40px;

        .el-col {
          padding: 0 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .el-input {
          .el-input__inner {
            background-color: $global-bg-color-secondary;
            border-color: $global-main-color;
            margin-left: -15px;
            width: $key-panel-width - $save-button-width;
            height: $item-height;
            color: $global-font-color;
            font-size: 12px;
            border-radius: 0;
          }
        }

        .el-button {
          width: $save-button-width;
          height: $item-height;
          line-height: $item-height;
          padding: 0 7px;
          border-radius: 0;
          font-size: 12px;
        }

        &.item-list {
          padding: 0;

          .col-index {
            border-right: 1px solid $global-border-color-secondary;
            text-align: center;
          }

          .col-ele {
            border-right: 1px solid $global-border-color-secondary;
            display: flex;

            .el-input {
              .el-input__inner {
                background-color: $global-bg-color-secondary;
                border-color: $global-main-color;
                margin-left: -15px;
                width: 100px - $save-button-width;
                height: $item-height - 2;
                color: $global-font-color;
                font-size: 12px;
                border-radius: 0;
              }
            }

            .el-button {
              width: $save-button-width;
              height: $item-height - 2;
              line-height: $item-height - 2;
              margin-top: 1px;
              padding: 0 7px;
              border-radius: 0;
              font-size: 12px;
            }
          }
        }

        &.is-active {
          background-color: $global-bg-color-hover;
          color: $global-font-color;
        }
      }
    }

    .data-value {
      position: absolute;
      top: 0;
      left: $data-key-width;
      right: 0;
      bottom: 0;
    }

    .el-textarea {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .el-textarea__inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        resize: none;
      }
    }
  }

  .menu {
    position: absolute;
    height: $menu-height;
    left: 0;
    bottom: 0;
    width: $key-panel-width + 1;
    border-top: 1px solid $global-border-color-base;
    border-right: 1px solid $global-border-color-base;

    .el-button-group {
      margin-top: -1px;

      .el-button {
        padding: 4px 6px;
        border-radius: 0 !important;

        .iconfont {
          font-size: 12px;

        }
      }
    }
  }
}
